<template>
  <div class="sidebar">
    <div class="brand">
      <el-button link @click="toggle">
        <el-icon>
          <component :is="isCollapse ? Expand : Fold" />
        </el-icon>
      </el-button>
      <span v-show="!isCollapse" class="brand-title">问卷系统</span>
    </div>

    <el-scrollbar class="menu-scroll">
    <el-menu
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      :default-active="route.path"
      @open="handleOpen"
      @close="handleClose"
      router
      unique-opened
      collapse-transition
      background-color="transparent"
      text-color="#606266"
      active-text-color="#409EFF"
    >
      <!-- 物业公司管理 - 权限为3和5的用户不显示 -->
      <el-sub-menu index="1">
        <template #title>
          <el-icon>
            <location />
          </el-icon>
          <span>问卷管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/HomePage/QuestionnaireList">创建问卷</el-menu-item>
          <!-- <el-menu-item index="1-2" route="/HomePage/QuestionnaireEditor">设计问卷</el-menu-item> -->
          <!-- <el-menu-item index="/HomePage/Community">发送问卷</el-menu-item> -->
        </el-menu-item-group>
      </el-sub-menu>
      
      <!-- 用户管理 - 权限为5的用户可以看到，权限为3的用户不能看到 -->
      <el-sub-menu index="2">
        <template #title>
          <el-icon><icon-menu /></el-icon>
          <span>用户管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="2-1" route="/HomePage/User">个人中心</el-menu-item>
          <el-menu-item index="2-2" route="/HomePage/Permission">权限管理</el-menu-item>
          <el-menu-item index="2-3" route="/HomePage/ChangePassword">修改密码</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>

      <!-- 设备管理 - 只有权限为3的用户才能看见 -->
      <!-- <el-sub-menu index="3">
        <template #title>
          <el-icon>
            <location />
          </el-icon>
          <span>设备管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="3-1" route="/HomePage/Facility">设备</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu> -->

      <!-- 业主管理 - 权限为3和5的用户不显示 -->
      <!-- <el-sub-menu index="4">
        <template #title>
          <el-icon>
            <setting />
          </el-icon>
          <span>业主管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="4-1" route="/HomePage/Owner">业主</el-menu-item>
          <el-menu-item index="4-2" route="/HomePage/OwnerAccess">门禁信息</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu> -->

      <!-- 省市模块 - 只有管理员权限(0)可见 -->
      <!-- <el-sub-menu index="5">
        <template #title>
          <el-icon>
            <map-location />
          </el-icon>
          <span>省市模块</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="5-1" route="/HomePage/LocationManager">省市管理</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
       -->
      <!-- 数据统计模块 - 所有用户可见 -->
      <!-- <el-sub-menu index="6">
        <template #title>
          <el-icon>
            <document />
          </el-icon>
          <span>数据统计</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="6-1" route="/HomePage/Statistics">统计报表</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu> -->
      
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script setup>
  import { onMounted, watch, ref, toRefs } from 'vue'
  import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
    MapLocation,
    Fold,
    Expand,
  } from '@element-plus/icons-vue'
  import { useRoute } from 'vue-router'
  
  const props = defineProps({
    isCollapse: { type: Boolean, default: true }
  })
  const emit = defineEmits(['update:isCollapse'])
  const { isCollapse } = toRefs(props)
  const toggle = () => emit('update:isCollapse', !props.isCollapse)
  const route = useRoute()
  
  const handleOpen = (key, keyPath) => {
    console.log('open', key, keyPath)
  }
  const handleClose = (key, keyPath) => {
    console.log('close', key, keyPath)
  }

  const auth = ref(null)
  const auths = ref([])
  onMounted(() => {
    auth.value = localStorage.getItem('auth')
    auths.value = localStorage.getItem('auths')
    const saved = localStorage.getItem('sidebarCollapsed')
    if (saved !== null) emit('update:isCollapse', saved === 'true')
  })
  watch(() => props.isCollapse, v => localStorage.setItem('sidebarCollapsed', String(v)))
  </script>

  <style scoped>
  .sidebar {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: transparent;
    color: #303133;
  }
  .brand {
    height: 56px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border-bottom: 1px solid #ebeef5;
  }
  .brand-title { font-weight: 600; letter-spacing: .2px; }
  .menu-scroll { flex: 1; }
  :deep(.el-menu) {
    border-right: none;
    background: transparent;
  }
  :deep(.el-menu-item), :deep(.el-sub-menu__title) {
    position: relative;
    transition: background .2s ease, box-shadow .2s ease, color .2s ease;
  }
  :deep(.el-menu-item:hover), :deep(.el-sub-menu__title:hover) {
    background: linear-gradient(90deg, rgba(64,158,255,.12), rgba(64,158,255,.06));
  }
  :deep(.el-menu-item.is-active) {
    color: #409EFF;
    background: linear-gradient(90deg, rgba(64,158,255,.18), rgba(64,158,255,.10));
  }
  :deep(.el-menu-item::before), :deep(.el-sub-menu__title::before) {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 2px;
    background: #409EFF;
    opacity: 0;
    transition: opacity .2s ease;
  }
  :deep(.el-menu-item:hover::before), :deep(.el-menu-item.is-active::before), :deep(.el-sub-menu__title:hover::before) {
    opacity: 1;
  }
  </style>
  